<template>
  <div>
    <!-- 顶栏 -->
    <div class="header">
      <div style="width: 1190px; margin: 0 auto">
        <a href="/login" class="hd_nav">亲，请登录</a>
        &nbsp;&nbsp;
        <a href="/register" class="hd_nav">免费注册</a>
        <div style="float: right">
          <a href="/myorder" class="hd_nav">我的订单</a>
          <el-divider direction="vertical"></el-divider>
          <a href="#" class="hd_nav">我的就爱</a>
          <el-divider direction="vertical"></el-divider>
          <a href="#" class="hd_nav">就爱卖家中心</a>
          <el-divider direction="vertical"></el-divider>
          <a href="#" class="hd_nav">联系客服</a>
        </div>
      </div>
    </div>

    <div class="container">
      <!-- 头部 -->
      <div class="top">
        <!-- Logo -->
        <a href="/" class="logo">
          <img src="../../assets/logo.png" alt="" />
        </a>
      </div>

      <!-- 主体 -->
      <el-main class="main">
        <div class="order_info">
          <div class="header_wrapper">
            <h3 class="header_title">我的购物车</h3>
          </div>
          <el-table
            ref="multipleTable"
            :header-cell-style="headFirst"
            :data="tableData"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              type="selection"
              width="39"
              align="center"
            ></el-table-column>
            <el-table-column
              header-align="center"
              prop="commodity_name"
              label="商品信息"
            >
              <el-table-column width="111">
                <template slot-scope="scope">
                  <img
                    :src="
                      'http://localhost:5000' + scope.row.commoditySurfacePlot
                    "
                    style="height: 90px; width: 90px"
                  />
                </template>
              </el-table-column>
              <el-table-column
                prop="commodityName"
                width="200"
              ></el-table-column>
              <el-table-column
                header-align="center"
                prop="propertyVel"
                width="160"
              >
              </el-table-column>
            </el-table-column>

            <el-table-column
              header-align="center"
              align="center"
              prop="money"
              label="单价"
              width="130"
              :formatter="money"
            ></el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              prop="quantity"
              label="数量"
              width="151"
            >
              <template slot-scope="scope">
                <el-input-number
                  size="mini"
                  v-model="scope.row.quantity"
                  @change="changeCount(scope.row)"
                  :min="1"
                  :max="10"
                ></el-input-number>
              </template>
            </el-table-column>
            <el-table-column
              header-align="center"
              align="right"
              prop="defaultMoney"
              label="金额"
              width="130"
              :formatter="defaultMoney"
            ></el-table-column>
            <el-table-column label="操作" width="98" align="center">
              <template slot-scope="scope">
                <el-button
                  @click.native.prevent="deleteRow(scope.$index, tableData)"
                  type="text"
                  size="small"
                  slot="renference"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="margin-top: 20px; height: 35px">
            <el-button size="small" @click="toggleAllSelection()"
              >全选</el-button
            >
            <el-button size="small" @click="toggleSelection()"
              >取消选择</el-button
            >
            <el-button size="small" @click="deletech()">删除</el-button>
            <div style="float: right">
              <span style="margin-right: 50px"
                >已选商品{{ totalSubtotal }}件</span
              >
              <span style="margin-right: 50px"
                >合计(不含运费和进口税)：{{ totalQuantity }}元</span
              >
              <el-button size="small" class="settlement" plain @click="gopay"
                >结算</el-button
              >
            </div>
          </div>
        </div>
      </el-main>
    </div>

    <!-- 底部 -->
    <el-footer>
      <!-- 版权声明、备案信息 -->
      <div class="copyright">
        <span style="margin-left: 50px">
          Copyright 2021 9iMall. All Rights Reserved 就爱商城 版权所有
        </span>
        <span style="margin-left: 50px">
          <a href="https://beian.miit.gov.cn/" target="_blank">
            晋ICP备2020012685号-1</a
          >
          &nbsp;|&nbsp;
          <a
            target="_blank"
            href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=35080202351228"
            ><img
              class="record_ico"
              src="https://cdn.jsdelivr.net/gh/XueChenda/blog_imgs/img/%E5%A4%87%E6%A1%88%E5%9B%BE%E6%A0%87.png"
            />
            闽公网安备 35080202351228号</a
          >
        </span>
      </div>
    </el-footer>
  </div>
</template>

<script>
import { selectshoppingcart, deletecommodity } from "../../api/shoppingcart";
export default {
  data() {
    return {
      tableData: [],
      multipleSelection: [],
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
    gopay() {
      if (this.multipleSelection.length == 0) {
        this.$message.error("请至少选择一件商品进行结算哦");
      } else {
        let a = [];
        for (let i = 0; i < this.multipleSelection.length; i++) {
          a.push(this.multipleSelection[i].id);
        }
        a.map(Number);
        console.log(a);
        this.$router.push({
          path: "/pay",
          query: { payid: a },
        });
      }
    },
    deleteRow(index, rows) {
      console.log(this.tableData[index].id);
      deletecommodity(this.tableData[index].id)
        .then((data) => {
          console.log(data.data);
          rows.splice(index, 1);
          this.$message({
            message: "删除成功，如需再次购买需要重新添加",
            type: "success",
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    deletech() {
      this.tableData = undefined;
    },
    toggleAllSelection() {
      this.$refs.multipleTable.toggleAllSelection();
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    // 合并表头
    headFirst({ row, colunm, rowIndex, columnIndex }) {
      if (rowIndex === 1) {
        return { display: "none" };
      }
      return "background:#f5f7fa";
    },
    // 计算单个商品总价
    changeCount(row) {
      row.defaultMoney = row.quantity * row.money;
    },
    // 小计金额格式化
    defaultMoney(row) {
      return parseFloat(row.defaultMoney).toFixed(2);
    },
    // 单价金额格式化
    money(row) {
      return parseFloat(row.money).toFixed(2);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    shoppingcart() {
      selectshoppingcart(1)
        .then((data) => {
          console.log(data.data);
          this.tableData = data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
    this.shoppingcart();
  },
  computed: {
    // 总价
    totalQuantity() {
      var price_total = 0;
      for (var i = 0; i < this.multipleSelection.length; i++) {
        price_total +=
          this.multipleSelection[i].quantity * this.multipleSelection[i].money;
      }

      return parseFloat(price_total).toFixed(2);
    },
    // 总数
    totalSubtotal() {
      var number_total = 0;
      for (var i = 0; i < this.multipleSelection.length; i++) {
        number_total += this.multipleSelection[i].quantity;
      }
      return number_total;
    },
  },
};
</script>

<style scoped>
/* 顶栏 */
.header {
  height: 35px;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
}

.hd_nav:hover {
  color: #ff5000;
}

/* 容器 */
.container {
  width: 1060px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 头部 */
.top {
  padding-top: 24px;
  height: 98px;
}

/* Logo */
.logo {
  float: left;
  margin: 8px 20px 0 20px;
}

.order_status {
  position: relative;
  left: 214px;
  top: 5px;
  margin: 8px 20px 0 20px;
}

/* 主体 */
.main {
  min-height: calc(100vh - 120px);
  overflow: hidden;
  border-radius: 18px;
  background-color: #fff;
}

/* 卡片内边距 */
.el-card >>> .el-card__body {
  padding: 0;
}

.el-card.is-always-shadow,
.el-card.is-hover-shadow:focus,
.el-card.is-hover-shadow:hover {
  box-shadow: none;
}

/* 底部 */
.el-footer {
  text-align: center;
  line-height: 60px;
  margin: 35px auto;
  background-color: white;
}

/* 版权声明、备案信息 */
.copyright {
  color: #58666e;
  margin-left: 0;
}

/* 备案图标 */
.record_ico {
  vertical-align: middle;
}
</style>
